@use "@/business/style/mixin.scss" as mixin;
@use "@/business/style/theme-config.scss" as themeConfig;

.app-button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
  &.disabled {
    cursor: no-drop;
  }
}
/* 系统最大尺寸按钮，按钮高度及字体高度为45px，字体大小为20px */
.app-button-larger {
  height: 45px;
  line-height: 1;
  font-size: themeConfig.$app-font-size20;
  padding: 0 25px;
  &.round {
    border-radius: 23px;
  }
}
/* 系统大尺寸按钮，按钮高度及字体高度为40px，字体大小为18px */
.app-button-large {
  height: 40px;
  line-height: 1;
  font-size: themeConfig.$app-font-size18;
  padding: 0 22px;
  &.round {
    border-radius: 20px;
  }
}

/* 系统中等尺寸按钮，按钮高度及字体高度为36px，字体大小为14px */
/* 主要使用场景为页面内部的非主要操作按钮，通常按钮位置在页面中间位置 */
.app-button-middle {
  height: 36px;
  line-height: 1;
  font-size: themeConfig.$app-font-size14;
  padding: 0 20px;
  &.round {
    border-radius: 16px;
  }
}

/* 系统小尺寸按钮，按钮高度及字体高度为32px，字体大小为12px */
/* 主要使用场景为页面内部的小操作按钮，具体使用场景如： */
/* 1、登录页面“获取验证码”按钮 */
/* 2、考勤异常中的“异常申请”按钮 */
.app-button-small {
  height: 32px;
  line-height: 1;
  font-size: themeConfig.$app-font-size12;
  padding: 0 18px;
  &.round {
    border-radius: 14px;
  }
}
/* 系统最小尺寸按钮，按钮高度及字体高度为25px，字体大小为10px */
/* 主要使用场景为页面内部的最小操作按钮，具体使用场景如： */
/* 1、考勤异常页面的“设为正常”按钮 */
.app-button-mini {
  height: 25px;
  line-height: 1;
  font-size: themeConfig.$app-font-size11;
  padding: 0 12px;
  &.round {
    border-radius: 10px;
  }
}

/* 应用主色调按钮（主要按钮），按钮背景色为系统主色，按钮字体颜色为白色 */
.app-primary-button {
  border-radius: 5px;
  text-align: center;
  @include mixin.set_theme_style(background-color, app-primary-color);
  @include mixin.set_theme_style(color, app-text-inverse-color);
  @include mixin.set_animation(all);
  &.disabled {
    @include mixin.set_theme_style(background-color, app-text-disable-color);
  }
  &::after {
    content: unset;
  }
  &:not(.disabled):not(.plain):hover {
    @include mixin.set_hover_color(background-color, app-primary-color);
  }
  &:not(.disabled):not(.plain):active {
    @include mixin.set_active_color(background-color, app-primary-color);
  }

  /* 主色调按钮（次要按钮），按钮背景色为白色，按钮字体颜色及按钮边框颜色为应用主色 */
  &.plain {
    @include mixin.set_theme_style(background-color, app-bg-default-color);
    @include mixin.set_theme_style(color, app-primary-color);
    border-style: solid;
    border-width: 1px;
    @include mixin.set_theme_style(border-color, app-primary-color);

    &.disabled {
      @include mixin.set_theme_style(color, app-text-disable-color);
      @include mixin.set_theme_style(border-color, app-text-disable-color);
    }

    &::after {
      content: unset;
    }

    &:not(.disabled):hover {
      @include mixin.set_hover_color(color, app-primary-color);
      @include mixin.set_hover_color(border-color, app-primary-color);
    }

    &:not(.disabled):active {
      @include mixin.set_active_color(color, app-primary-color);
      @include mixin.set_active_color(border-color, app-primary-color);
    }
  }
}

/* 警告主色调按钮（主要按钮），按钮背景色为警告主色，按钮字体颜色为白色 */
.app-warning-button {
  border-radius: 5px;
  text-align: center;
  @include mixin.set_theme_style(background-color, app-warning-color);
  @include mixin.set_theme_style(color, app-text-inverse-color);
  @include mixin.set_animation(all);

  &.disabled {
    @include mixin.set_theme_style(background-color, app-text-disable-color);
  }

  &::after {
    content: unset;
  }

  &:not(.disabled):not(.plain):hover {
    @include mixin.set_hover_color(background-color, app-warning-color);
  }

  &:not(.disabled):not(.plain):active {
    @include mixin.set_active_color(background-color, app-warning-color);
  }
  /* 警告主色调按钮（次要按钮），按钮背景色为白色，按钮字体颜色及按钮边框颜色为警告主色 */
  &.plain {
    @include mixin.set_theme_style(background-color, app-bg-default-color);
    @include mixin.set_theme_style(color, app-warning-color);
    border-style: solid;
    border-width: 1px;
    @include mixin.set_theme_style(border-color, app-warning-color);
    &.disabled {
      @include mixin.set_theme_style(color, app-text-disable-color);
      @include mixin.set_theme_style(border-color, app-text-disable-color);
    }
    &::after {
      content: unset;
    }
    &:not(.disabled):hover {
      @include mixin.set_hover_color(color, app-warning-color);
      @include mixin.set_hover_color(border-color, app-warning-color);
    }
    &:not(.disabled):active {
      @include mixin.set_active_color(color, app-warning-color);
      @include mixin.set_active_color(border-color, app-warning-color);
    }
  }
}

/* 错误主色调按钮（主要按钮），按钮背景色为错误主色，按钮字体颜色为白色 */
.app-error-button {
  border-radius: 5px;
  text-align: center;
  @include mixin.set_theme_style(background-color, app-error-color);
  @include mixin.set_theme_style(color, app-text-inverse-color);
  @include mixin.set_animation(all);

  &.disabled {
    @include mixin.set_theme_style(background-color, app-text-disable-color);
  }

  &::after {
    content: unset;
  }

  &:not(.disabled):not(.plain):hover {
    @include mixin.set_hover_color(background-color, app-error-color);
  }
  &:not(.disabled):not(.plain):active {
    @include mixin.set_active_color(background-color, app-error-color);
  }
  /* 错误主色调按钮（次要按钮），按钮背景色为白色，按钮字体颜色及按钮边框颜色为错误主色 */
  &.plain {
    @include mixin.set_theme_style(background-color, app-bg-default-color);
    @include mixin.set_theme_style(color, app-error-color);
    border-style: solid;
    border-width: 1px;
    @include mixin.set_theme_style(border-color, app-error-color);
    &.disabled {
      @include mixin.set_theme_style(color, app-text-disable-color);
      @include mixin.set_theme_style(border-color, app-text-disable-color);
    }
    &::after {
      content: unset;
    }
    &:not(.disabled):hover {
      @include mixin.set_hover_color(color, app-error-color);
      @include mixin.set_hover_color(border-color, app-error-color);
    }
    &:not(.disabled):active {
      @include mixin.set_active_color(color, app-error-color);
      @include mixin.set_active_color(border-color, app-error-color);
    }
  }
}

/* 成功主色调按钮（主要按钮），按钮背景色为成功主色，按钮字体颜色为白色 */
.app-success-button {
  border-radius: 5px;
  text-align: center;
  @include mixin.set_theme_style(background-color, app-success-color);
  @include mixin.set_theme_style(color, app-text-inverse-color);
  @include mixin.set_animation(all);

  &.disabled {
    @include mixin.set_theme_style(background-color, app-text-disable-color);
  }

  &::after {
    content: unset;
  }

  &:not(.disabled):not(.plain):hover {
    @include mixin.set_hover_color(background-color, app-success-color);
  }
  &:not(.disabled):not(.plain):active {
    @include mixin.set_active_color(background-color, app-success-color);
  }
  /* 成功主色调按钮（次要按钮），按钮背景色为白色，按钮字体颜色及按钮边框颜色为成功主色 */
  &.plain {
    @include mixin.set_theme_style(background-color, app-bg-default-color);
    @include mixin.set_theme_style(color, app-success-color);
    border-style: solid;
    border-width: 1px;
    @include mixin.set_theme_style(border-color, app-success-color);
    &.disabled {
      @include mixin.set_theme_style(color, app-text-disable-color);
      @include mixin.set_theme_style(border-color, app-text-disable-color);
    }
    &::after {
      content: unset;
    }
    &:not(.disabled):hover {
      @include mixin.set_hover_color(color, app-success-color);
      @include mixin.set_hover_color(border-color, app-success-color);
    }
    &:not(.disabled):active {
      @include mixin.set_active_color(color, app-success-color);
      @include mixin.set_active_color(border-color, app-success-color);
    }
  }
}

/* 应用主色调超链接 */
.app-primary-link {
  @include mixin.set_theme_style(color, app-primary-color);
  @include mixin.set_animation(all);
  background-color: transparent;

  &.underline {
    text-decoration: underline;
  }

  &.disabled {
    @include mixin.set_theme_style(color, app-text-disable-color);
  }

  &:not(.disabled):hover {
    @include mixin.set_hover_color(color, app-primary-color);
  }
  &:not(.disabled):active {
    @include mixin.set_active_color(color, app-primary-color);
  }
}

/* 警告主色调超链接 */
.app-warning-link {
  @include mixin.set_theme_style(color, app-warning-color);
  @include mixin.set_animation(all);
  background-color: transparent;

  &.underline {
    text-decoration: underline;
  }

  &.disabled {
    @include mixin.set_theme_style(color, app-text-disable-color);
  }

  &:not(.disabled):hover {
    @include mixin.set_hover_color(color, app-warning-color);
  }

  &:not(.disabled):active {
    @include mixin.set_active_color(color, app-warning-color);
  }
}

/* 错误主色调超链接 */
.app-error-link {
  @include mixin.set_theme_style(color, app-error-color);
  @include mixin.set_animation(all);
  background-color: transparent;

  &.underline {
    text-decoration: underline;
  }

  &.disabled {
    @include mixin.set_theme_style(color, app-text-disable-color);
  }

  &:not(.disabled):hover {
    @include mixin.set_hover_color(color, app-error-color);
  }

  &:not(.disabled):active {
    @include mixin.set_active_color(color, app-error-color);
  }
}

/* 成功主色调超链接 */
.app-success-link {
  @include mixin.set_theme_style(color, app-success-color);
  @include mixin.set_animation(all);
  background-color: transparent;

  &.underline {
    text-decoration: underline;
  }

  &.disabled {
    @include mixin.set_theme_style(color, app-text-disable-color);
  }

  &:not(.disabled):hover {
    @include mixin.set_hover_color(color, app-success-color);
  }

  &:not(.disabled):active {
    @include mixin.set_active_color(color, app-success-color);
  }
}
